<template>
  <div class="loginhome" style="overflow: auto">
    <!-- 用户信息 -->
    <div class="infodiv">
      <div><img :src="countinfo.avatarUrl" class="avadiv" /></div>
      <div class="namediv">{{ countinfo.nickname }}</div>
      <div>
        <span>关注 {{ followlist.length }}</span>
        <span>粉丝 {{ fanlist.length }} </span>
        <span>等级 {{ levelinfo.level }}</span>
      </div>
    </div>
    <!-- 歌单 -->
    <div class="mysong">
      <div>
        <ul v-infinite-scroll="load">
          <li
            v-for="(item, index) in playlist"
            :key="index"
            @click="gosonglist(index, item.id)"
            class="imgsty"
          >
            <img :src="item.coverImgUrl" /> {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footerdiv">
      <Footer />
    </div>
  </div>
</template>

<script>
import Footer from "./Footer.vue";
export default {
  components: { Footer },
  data() {
    return {
      countinfo: [],
      levelinfo: [],
      followlist: [],
      fanlist: [],
      likelist: [],
      playlist: [],
      count: 0,
    };
  },
  created() {
    this.getuserinfo();
  },
  methods: {
    gosonglist(index, id) {
      this.$router.push({
        path: "/songlist",
        query: { myindex: index, id: id },
      });
      localStorage.setItem("id", id);
    },
    load() {
      this.count += 2;
    },
    getuserinfo() {
      // 获取账户信息
      this.axios
        .get(`/user/account`)
        .then((res) => {
          this.countinfo = res.data.profile;
          this.id = this.countinfo.userId;

          // 获取关注数
          this.axios
            .get(`/user/follows?uid=${this.id}`)
            .then((res) => {
              this.followlist = res.data.follow;
            })
            .catch((err) => {
              console.log(err);
            });
          // 获取粉丝数
          this.axios
            .get(`/user/followeds?uid=${this.id}`)
            .then((res) => {
              this.fanlist = res.data.followeds;
            })
            .catch((err) => {
              console.log(err);
            });
          // 获取喜欢歌曲列表
          this.axios
            .get(`/likelist?uid=${this.id}`)
            .then((res) => {
              this.likelist = res.data.ids;
            })
            .catch((err) => {
              console.log(err);
            });
          // 获取用户歌单
          this.axios
            .get(`/user/playlist?uid=${this.id}`)
            .then((res) => {
              this.playlist = res.data.playlist;
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
      // 获取用户等级信息
      this.axios
        .get(`/user/level`)
        .then((res) => {
          this.levelinfo = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.infodiv {
  text-align: center;
}
.mylove {
  margin-top: 30px;
  text-align: center;
}

.footerdiv {
  margin-top: 10px;
  margin-left: 20px;
}
.avadiv {
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

.namediv {
  font-weight: 700;
}
span {
  margin-left: 5px;
  font-size: 12px;
}

img {
  width: 40px;
  height: 40px;
}

.imgsty {
  margin-top: 5px;
  cursor: pointer;
}
</style>